
// 手动封装Swiper 轮播图 
import React, { Component } from 'react';

import { ajax } from './../utils/ajax';
import Myswipe from './MySwiper';

const {Item } = Myswipe
class Banner extends Component {
    state = {
        options:{
            autoplay: {
                delay: 2000,//1秒切换一次
            },
            speed:2000,
            loop:true,
            observer:true , // 观察  监听 swiper改变就会重新渲染实例化 
        },
        list:[
            require("@/assets/images/img1.jpg"),
            require("@/assets/images/img2.jpg"),
            require("@/assets/images/img3.jpg"),
            require("@/assets/images/img4.jpg"),
        ],
        banner:[]
    }
    componentDidMount(){
        console.log("parent")
        ajax.get("http://47.104.209.44:3333/artist/list")
        .then(res=>{
            this.setState({
                banner:res.data.artists.slice(0,5)
            })
        })
    }
    render() {
        console.log(this.state.list)
        return (
            <div>
        
                
                <h2 style={{textAlign:"center"}}> 手动封装Swiper 轮播图  </h2>
                <Myswipe id="sone" options={this.state.options}>
                    {
                        this.state.list.map((l,i)=>(
                            <Item key={i}> 
                                <img src={l.default} style={{width:'100%',height:300}} alt="" />
                            </Item>
                        ))
                    }
                </Myswipe>

                <Myswipe id="stwo" options={this.state.options}>
                    {
                        this.state.banner.map((l,i)=>(
                            <Item key={i}>
                                <img src={l.picUrl} style={{width:'100%',height:300}} alt="" />
                            </Item>
                        ))
                    }
                </Myswipe>
            </div>
        );
    }
}

export default Banner;
